@import './mixin';
/* 重写滚动条样式 */  
::-webkit-scrollbar  
{  
    width: px2rem(8px);  
    background-color: $bgc_main;  
}  
::-webkit-scrollbar-track  
{  
    border-radius: px2rem(10px);  
    background-color: $bgc_main;  
}  
::-webkit-scrollbar-thumb  
{  
    border-radius: px2rem(10px);  
    background-color: $bdc_sub; 
}
/* 标签样式重写 */
* {
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: auto;
    background: $bgc_main;
    font-size: $fs_main;
}
@for $number from 1 through 6 {
    h#{$number} {
        font-size: px2rem($h1fs - ($hfs_decrease * $number));
        font-weight: bold;
    }
}
input[type="button"], 
input[type="submit"], 
input[type="search"], 
input[type="reset"] {
    -webkit-appearance: none;
}
textarea { 
    -webkit-appearance: none;
}   
p {
    font-size: px2rem(14px);
    color: $fc_sub;
    padding: px2rem(8px);
    line-height: px2rem(24px);
}
a {
    cursor: pointer;
}

/* 常用样式 */  
[v-cloak], [hidden] {
	display: none !important;
}
.invisible {
	visibility: hidden !important;
}
.word-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.word-break {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
.text-block {
    display: block;
}
.text-inline {
    display: inline-block;
}
.text-left {
    text-align: left !important;
}
.text-center {
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}
.text-sm {
    font-size: px2rem(13px);
}
.text-md {
    font-size: px2rem(16px);
}
.text-lg {
    font-size: px2rem(20px);
}
.text-xl {
    font-size: px2rem(28px);
}
.text--success {
    color: $success;
}
.text--fail {
    color: $fail;
}
.text--warn {
    color: $warning;
}
.text--info {
    color: $info;
}
.disabled {
    color: $fc_disabled;
}
.link {
    color: $theme;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
}
.tip {
    width: 100%;
    text-align: center;
    line-height: px2rem(16px);
    font-size: px2rem(14px);
    color: $fc_sub;
    padding: px2rem(8px) 0;
}
.more {
    display: block;
    height: px2rem(32px);
    padding: 0;
    margin: px2rem(8px) auto;
    text-align: center;
    line-height: px2rem(32px);
    font-size: px2rem(14px);
    color: $theme_sub;
    overflow: hidden;
    &:hover {
        text-decoration: underline;
    }
}
.scrollable {
    overflow: auto;
    position: relative;
}
.clear{
    zoom:1;
}
.clear:after{
    content: '';
    display: block;
    clear: both;
}
.fill {
    width: 100%;
    height: 100%;
}
.flex-fill {
    flex: 1 1 auto;
}
.content__center {
    display: flex;
    justify-content: center;
    align-items: center;
    &.middle {
        flex-direction: column;
    }
}
.content__start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.content__end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.content__side {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content__fill>*:only-child,
.content__fill.force>* {
    width: 100%;
}
.content__inline>* {
    display: inline-block;
}
/* 常用结构样式 */
.content-row {
    width: 100%;
    display: flex;
    align-items: baseline;
    .content-row__label {
        display: inline-block;
        padding: 0 px2rem(8px) 0 px2rem(16px);
    }
    .content-row__content {
        display: inline-block;
        flex: 1 1 auto;
    }
}
.content-row--vertical {
    @extend .content-row;
    flex-direction: column;
    &>.content-row__label {
        width: 100%;
        display: block;
        padding: px2rem(16px) 0 px2rem(8px) 0;
    }
    &>.content-row__content {
        width: 100%;
        display: block;
        flex: 1 1 auto;
    }
}
/* 图文结构 */
.media-block {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    padding-right: px2rem(8px);
    padding-top: px2rem(8px);
    .media-block__icon {
        min-width: 20%;
        display: flex;
        justify-content: center;
        img,i,.icon {
            display: inline-block;
        }
    }
    .media-block__content {
        flex: 1 1 auto;
        padding: 0 0 px2rem(8px) px2rem(16px);
        overflow: hidden;
        .media-block__content-title {
            @extend .word-break;
            font-size: px2rem(20px);
            color: $fc_main;
            font-weight: bold;
            line-height: px2rem(32px);
        }
        .media-block__content-subtitle {
            @extend .word-break;
            margin-top: px2rem(8px);
            font-size: px2rem(16px);
            color: $fc_sub;
            line-height: px2rem(20px);
        }
        .media-block__content-extra {
            margin-top: px2rem(8px);
        }
    }
    .media-block__bundle {
        max-width: 33.333%;
        margin-left: px2rem(8px);
    }
}
/* 表单结构 */
.form-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .form-block__item {
        min-height: px2rem(48px);
        display: flex;
        align-items: center;
        padding-top: px2rem(16px);
        .form-block__item-label {
            width: px2rem(144px);
            font-size: px2rem(18px);
            line-height: px2rem(20px);
            color: color;
            font-weight: bold;
        }
        .form-block__item-content {
            flex: 1 1 auto;
        }
    }
}
/* 列表结构 */
.list-block {
    overflow-x: hidden;
    overflow-y: auto;
    .list-block__item {
        height: px2rem(48px);
        padding: px2rem(8px);
        cursor: pointer;
        position: relative;
        &::after {
            width: 100%;
            height: 1px;
            background: $bdc_main;
            content: '';
            position: absolute;
            bottom: 0;
            left: px2rem(8px);
        }
        &:hover {
            background: rgba($bdc_main, .3);
        }
        &.list-block__item--selected {
            background: rgba($bdc_main, .5);
        }
    }
}
/* 动画样式 */
@keyframes backOpacity{
   0%   { opacity: 1 }
   25%  { opacity: .5 }
   50%  { opacity: 1 }
   75%  { opacity: .5 }
   100% { opacity: 1 }
}
.animation_opactiy{
    animation: backOpacity 2s ease-in-out infinite;
}
/* 带遮罩的全局图层 */
.qrcode-fixed-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    .qrcode {
        min-width: px2rem(160px);
        min-height: px2rem(160px);
        position: relative;
        @include border(all, 1px, solid, white);
        background: rgba(255,255,255,.3);
        &::before {
            margin-top: 40%;
            text-align: center;
            content: '正在生成...';
            color: white;
            font-size: px2rem(16px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }
        &::after {
            text-align: center;
            content: '打开微信扫一扫';
            color: white;
            font-size: px2rem(16px);
            font-weight: bold;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -24px;
        }
        .closebtn {
            position: absolute;
            width: px2rem(32px);
            height: px2rem(32px);
            font-size: px2rem(16px);
            line-height: px2rem(30px);
            text-align: center;
            top: px2rem(-40px);
            right: px2rem(-40px);
            border-radius: 50%;
            background: rgba(0, 0, 0, .5);
            cursor: pointer;
            &::before {
                color: white;
                content: 'x';
            }
            &:hover {
                background: rgba(0, 0, 0, .8);
            }
        }
    }
}